import { TreeSelectType, CascaderType, DatePickType, SelectType, InputNumType, InputType } from "../utils/index.js";
import UtDatePick from "./UtDatePick.js";
import { defineComponent } from "vue";
import { ElFormItem } from "../node_modules/element-plus/es/components/form/index.js";
import { ElTreeSelect } from "../node_modules/element-plus/es/components/tree-select/index.js";
import { ElCascader } from "../node_modules/element-plus/es/components/cascader/index.js";
import { ElSelect, ElOption } from "../node_modules/element-plus/es/components/select/index.js";
import { ElInputNumber } from "../node_modules/element-plus/es/components/input-number/index.js";
import { ElInput } from "../node_modules/element-plus/es/components/input/index.js";
const FormItem = defineComponent({
  props: {
    option: {
      type: Object
    },
    item: {
      type: Object
    },
    model: {
      type: Object
    },
    disabled: Boolean
  },
  setup(props, { emit }) {
    const getContent = (data, item) => {
      switch (item.inputType) {
        case InputType:
          return /* @__PURE__ */ React.createElement(ElInput, {
            ...item.props,
            disabled: item.disabled || props.disabled,
            modelValue: props.model[item.name],
            "onUpdate:modelValue": (value) => {
              emit("ValUpdate", item.name, value);
            },
            onValUpdate: (key, value) => {
              emit("ValUpdate", key, value);
            },
            onBlur: () => {
              emit("change", item, props.model[item.name]);
            },
            onClear: () => {
              emit("change", item, props.model[item.name]);
            }
          }, item.slots);
        case InputNumType:
          return /* @__PURE__ */ React.createElement(ElInputNumber, {
            ...item.props,
            disabled: item.disabled || props.disabled,
            modelValue: props.model[item.name],
            "onUpdate:modelValue": (value) => {
              emit("ValUpdate", item.name, value);
            },
            onBlur: () => {
              emit("change", item, props.model[item.name]);
            }
          });
        case SelectType:
          return /* @__PURE__ */ React.createElement(ElSelect, {
            ...item.props,
            disabled: item.disabled || props.disabled,
            modelValue: props.model[item.name],
            "onUpdate:modelValue": (value) => {
              emit("ValUpdate", item.name, value);
            },
            onChange: () => {
              emit("change", item, props.model[item.name]);
            }
          }, item.option && item.option.map((opItem) => {
            return /* @__PURE__ */ React.createElement(ElOption, {
              key: opItem[item.optionProp.valueKey],
              label: opItem[item.optionProp.labelKey],
              value: opItem[item.optionProp.valueKey],
              disabled: opItem.disabled
            });
          }));
        case DatePickType:
          return /* @__PURE__ */ React.createElement(UtDatePick, {
            item,
            disabled: item.disabled || props.disabled,
            model: props.model,
            onChange: () => {
              emit("change", item, null);
            }
          });
        case CascaderType:
          return /* @__PURE__ */ React.createElement(ElCascader, {
            ...item.props,
            disabled: item.disabled || props.disabled,
            options: item.option,
            modelValue: props.model[item.name],
            "onUpdate:modelValue": (value) => {
              emit("ValUpdate", item.name, value);
            },
            onChange: () => {
              emit("change", item, props.model[item.name]);
            },
            onClear: () => {
              emit("change", item, props.model[item.name]);
            }
          });
        case TreeSelectType:
          return /* @__PURE__ */ React.createElement(ElTreeSelect, {
            ...item.props,
            disabled: item.disabled || props.disabled,
            data: item.option,
            modelValue: props.model[item.name],
            "onUpdate:modelValue": (value) => {
              emit("ValUpdate", item.name, value);
            },
            onChange: () => {
              emit("change", item, props.model[item.name]);
            }
          });
        default:
          return /* @__PURE__ */ React.createElement("div", {
            style: item.contentStyle
          }, props.model[item.name]);
      }
    };
    const itemStyle = Object.assign(
      {
        width: `${(props.item.weight || 1) * 100 / props.option.weight}%`,
        margin: props.option.itemMargin,
        fontWeight: "400"
      },
      props.item.itemStyle || {}
    );
    const slot = {
      label: (value) => {
        return /* @__PURE__ */ React.createElement("div", {
          style: props.item.labelStyle || props.option.labelStyle
        }, /* @__PURE__ */ React.createElement("span", null, value.label));
      },
      default: () => {
        return getContent(props.options, props.item);
      }
    };
    return () => {
      return /* @__PURE__ */ React.createElement(ElFormItem, {
        ...props.item.itemProps,
        label: props.item.label,
        prop: props.item.name,
        rules: props.item.rules,
        style: itemStyle
      }, slot);
    };
  }
});
export {
  FormItem as default
};
